<template>
  <div class="date_time_wrap">
    <span class="time">{{ time }}</span>
    <div class="date_box">
      <span class="month_day">{{ monthDay }}</span>
      <span class="week">{{ week }}</span>
      <span class="chinese_calendar">{{ chineseCalendar }}</span>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import "./index.scss";
export default defineComponent({
  name: "DateTime",
});
</script>
<script setup>
import dayjs from "dayjs";

import { getLunar } from "chinese-lunar-calendar";

// 时间
const time = ref("");

// 月份和日
const monthDay = ref("");

// 周
const week = ref("");

// 农历
const chineseCalendar = ref("");

// 获取日期信息的函数
const getDateInfoFunc = () => {
  const now = dayjs();
  const date = new Date(); // 默认是当前日期

  const weekDays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  time.value = now.format("HH:mm:ss");
  monthDay.value = now.format("M月DD日");
  week.value = weekDays[now.day()];
  chineseCalendar.value = getLunarDate(date);
};

const getLunarDate = (pDate) => {
  const year = pDate.getFullYear();
  const month = pDate.getMonth() + 1;
  const day = pDate.getDate();
  const result = getLunar(year, month, day);
  return result.dateStr;
};

onMounted(() => {
  getDateInfoFunc();
  setInterval(() => {
    getDateInfoFunc();
  }, 1000);
});
</script>

<style lang="scss" scoped></style>
